<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        省：<select v-model="curProvice">
                <option value="请选择" selected disabled>请选择</option>
                <option v-for="(item,index) in provice" :key="index">{{item}}</option>
            </select>
        市：<select v-model="curCity">
                <option value="请选择" selected disabled>请选择</option>
                <option v-for="(item,index) in city" :key="index">{{item}}</option>
            </select>
        区：<select v-model="curArea">
                <option value="请选择" selected disabled>请选择</option>
                <option v-for="(item,index) in area" :key="index">{{item}}</option>
            </select>
    </div>
    <script src="./vue.js"></script>
    <script>
        let cityList =[
                    {
                        name:'河北省',
                        city:[
                            {
                                name:'石家庄市',
                                area:['河西区','裕华区']
                            },
                            {
                                name:'正定市',
                                area:['正定县1','正定县2']
                            }
                        ]
                    },
                    {
                        name:'山西省',
                        city:[
                            {
                                name:'大同市',
                                area:['晋中','大同2']
                            }
                        ]
                    }
                ];
        let vm = new Vue({
            el:'#app',
            data:{
                curProvice:'请选择',
                curCity:'请选择',
                curArea:'请选择'
            },
            computed: {
                provice(){
                    return cityList.map(item => item.name)
                },
                city(){
                    this.curCity = '请选择';
                    let curItem = cityList.find(item => item.name === this.curProvice);
                    console.log(curItem);
                    if(curItem){
                        return curItem.city.map(item => item.name)
                    }else{
                        return []
                    }
                },
                area(){
                    this.curArea = '请选择';
                    let arr = [];
                    cityList.forEach(item => {
                        if(item.name === this.curProvice){
                            item.city.forEach(cItem => {
                                if(cItem.name === this.curCity){
                                    arr = cItem.area;
                                }
                            })
                        }
                    })
                    return arr
                }
            },
            methods: {
                add(){

                }
            }
        
        });

        //beforeCreate  data  el  

        //created       data methods  但是el没有挂载   ----》  请求数据  axios

        //beforeMount   虚拟DOM生成,但是真实的DOM没有生成

        //mounted       el挂载成功  -----》 操作dom

        // -----------------创建阶段 只执行一次--------------------

        //beforeUpdate    数据改变，视图未更新

        //updated         视图更新完毕

        // ---------------更新阶段 触发多次 ——------------------------

        //beforeDestroy

        //destroyed

        // ----------------销毁阶段 触发一次----------------------------

    </script>
</body>
</html>